<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="编号"
                  prop="clientId"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="客户名称"
                  prop="clientName"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="负责人"
                  prop="clientPeo"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="经营范围"
                  prop="clientScope"
                  width="360">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="display: flex;justify-content: center">
      <el-row style="margin: 25px;width: 200px">
        <el-input v-model="searchName" placeholder="客户名称" style="margin-bottom: 10px"></el-input>
        <el-input v-model="searchScope" placeholder="经营范围"></el-input>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-button plain type="primary" @click="findByItem">查询</el-button>
        <el-button plain type="primary" @click="showClientById">查看客户详情</el-button>
        <el-button plain type="primary" @click="updateClientInfo">更新客户信息</el-button>
        <el-button plain type="primary" @click="addClient">添加新的客户</el-button>
        <el-button plain type="primary" @click="exportTable">导出表格</el-button>
      </el-row>
      <el-upload
          ref="upload"
          :auto-upload="false"
          :file-list="fileList"
          action="api/client/importExcel"
          class="upload-demo"
          method="post">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button size="small" style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-upload>
    </div>


    <el-dialog
        :visible.sync="showInfoById"
        title="客户详情"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="客户名称">
          {{ currentRow.clientName }}
        </el-form-item>
        <el-form-item label="负责人">
          {{ currentRow.clientPeo }}
        </el-form-item>
        <el-form-item label="负责人电话">
          {{ currentRow.clientTel }}
        </el-form-item>
        <el-form-item label="办公地址">
          {{ currentRow.clientAddress }}
        </el-form-item>
        <el-form-item label="客户经营范围">
          {{ currentRow.clientScope }}
        </el-form-item>
        <el-form-item label="客户email">
          {{ currentRow.clientEmail }}
        </el-form-item>

      </el-form>
    </el-dialog>


    <el-dialog
        :visible.sync="updateInfoById"
        title="更新客户信息"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="客户名称">
          {{ currentRow.clientName }}
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="updateClientPeo" placeholder="请输入内容">{{ updateClientPeo }}</el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="updateClientTel" placeholder="请输入内容">{{ updateClientTel }}</el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          {{ currentRow.clientAddress }}
        </el-form-item>
        <el-form-item label="客户经营范围">
          <el-input v-model="updateClientScope" placeholder="请输入内容">{{ updateClientScope }}</el-input>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="update">点击更新</el-button>
    </el-dialog>


    <el-dialog
        :visible.sync="addNewInfo"
        title="添加新的客户信息"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="客户名称">
          <el-input v-model="newClientName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="newClientPeo" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="newClientTel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="newClientAddress" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="客户经营范围">
          <el-input v-model="newClientEmail" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="客户经营范围">
          <el-input v-model="newClientScope" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="addNew">点击添加</el-button>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Client",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      currentRow: 0,//当前选中列
      showInfoById: false,
      searchName: '',
      searchScope: '',
      updateInfoById: false,
      updateClientPeo: '',
      updateClientTel: '',
      updateClientScope: '',
      addNewInfo: false,
      newClientPeo: '',
      newClientName: '',
      newClientTel: '',
      newClientAddress: '',
      newClientScope: '',
      newClientEmail: '',
      fileList: []
    }
  }
  ,
  mounted() {
    this.showPage()
  }
  ,
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    }
    ,
    findByItem() {
      this.showPage()
    }
    ,
    showPage() {
      if (this.searchName == '') {
        this.searchName = 1
      }
      if (this.searchScope == '') {
        this.searchScope = 1
      }
      let url = "api/client/showClientByPage/" + this.currentPage + "/" + this.searchName + "/" + this.searchScope

      this.axios.get(url).then(
          r => {
            this.tableData = r.data.records
            this.totalSize = r.data.total
            this.pageSize = r.data.size
          }
      )
      this.searchName = ''
      this.searchScope = ''
    }
    , handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    }
    , showClientById() {
      if (this.currentRow === 0) {
        this.messageShow("请先选中行")
        return
      }
      this.showInfoById = true
      console.log("current:" + this.currentRow)
    }
    , updateClientInfo() {
      if (this.currentRow === 0) {
        this.messageShow("请先选中行")
        return
      }
      this.updateInfoById = true
    }
    , update() {
      //未输入的时候如何进行处理
      if (this.updateClientPeo === '' || this.updateClientTel === '' || this.updateClientScope === '') {
        this.messageShow("更新失败", "还有必填项没有填写")
        return;
      }
      let url = "api/client/updateClientById/" + this.currentRow.clientId + "/" + this.updateClientPeo + "/" + this.updateClientTel + "/" + this.updateClientScope;
      this.axios.post(url).then(
          r => {
            this.messageShow('', r.data.info)
            //关闭窗口
            this.updateInfoById = false
            this.showPage()
            this.updateClientScope = ''
            this.updateClientPeo = ''
            this.updateClientTel = ''
          })
    }
    , addClient() {
      this.addNewInfo = true
    }
    , addNew() {
      if (this.newClientEmail === '' || this.newClientName === '' || this.newClientPeo === '' || this.newClientTel === '' || this.newClientAddress === '' || this.newClientScope === '') {
        this.messageShow("添加失败", "还有必填项没有进行填写")
        return
      }
      let url = "api/client/addClient" + "/" + this.newClientName + "/" + this.newClientPeo + "/" + this.newClientTel + "/" + this.newClientAddress + "/" + this.newClientEmail + "/" + this.newClientScope
      this.axios.post(url).then(
          r => {
            this.messageShow("添加成功")
            this.addNewInfo = false
            this.showPage()
          })
    }, exportTable() {
      document.location.href = "http://localhost:8880/client/exportExcel";
      this.messageShow("导出成功")
    }, submitUpload() {
      this.$refs.upload.submit();
      this.messageShow("上传成功", "更新完成")
      this.showPage()
    }, messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    }
  }
}
</script>

<style scoped>

</style>